import { View, Text } from "@tarojs/components"
import { CSSProperties, useEffect, useState } from "react"
import Global from "../lib/global"
import BorderlessButton from "./borderless-button"
import Taro from '@tarojs/taro'

import "./navigationbar.scss"

export interface NavigationBarProps {
    title?: string,
    backgroundColor?: string
    titleFontSize?: string,
    is?:boolean,
    creaTime?:()=>void
}

const NavigationBar = (props: NavigationBarProps) => {

    let [isShowBackBtn, setIsShowBackBtn] = useState(false)

    let systemInfo = Global.shared.systemInfo
    let statusBarHeight = systemInfo.statusBarHeight
    let contentHeight = systemInfo.system.startsWith("Android") ? 48 : 44

    let style: CSSProperties = {
        backgroundColor: props.backgroundColor ?? "white",
    }
    
    useEffect(() => {
        setIsShowBackBtn(Taro.getCurrentPages().length > 1)
    }, [])

    let onBackBtnClick = () => {
        if(props.is){
            console.log('sssss')
            props.creaTime()
        }
        Taro.navigateBack()
    }

    return (
    <View className="navigationbar" style={ style }>
        <View className="navigationbar-statusbar" style={{ height: `${statusBarHeight}px` }}></View>
        <View className="navigationbar-content" style={{ height: `${contentHeight}px`, padding: "0 16px" }}>

            {/* 左边按钮 */}
            <View className="navigationbar-left-el">
                <BorderlessButton 
                    backgroundImage="icon_back@3x.png" 
                    style={{width: `${isShowBackBtn ? 22 : 0}px`, height: '22px', backgroundColor: 'transparent'}}
                    onClick={onBackBtnClick}
                    />
            </View>

            {/* 标题 */}
            <Text className="navigationbar-title" 
                style={{
                    fontSize: props.titleFontSize ?? "18px"
                    }}>
                { props.title }
            </Text>

            {/* 右边占位 */}
            <View className="navigationbar-right-el"/>
        </View>
    </View>
    )
}
export default NavigationBar